<template>
  <div class="zhiboxiaoshou_shangpinfabu">
    <top></top>
    <div class="flex zhiboxitong_content">
      <div class="left">
        <left></left>
      </div>
      <div class="right">
        <div class="zhiboxitong_right">
          <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/zhiboxitong/zhiboxiaoshou'}">直播销售</el-breadcrumb-item>
            <el-breadcrumb-item>销售页商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加商品</el-breadcrumb-item>
          </el-breadcrumb> -->
          <h3 style="margin:0 0 20px 20px">商品信息配置</h3>
          <div class="flex" style="background:#F8F9FD; padding: 0 0 0 20px; border-radius: 30px 0 0 30px;">
            <div class="fleft">
              <div class="flexc" style="margin-bottom: 20px;margin-left: 15px;">
                <div class="z"><span class="red">*</span>敢探号商品:</div>
                <div class="r flex" >

                  <el-input v-model="all.page_name" style="width: 220px;" placeholder="请选择商品" disabled v-if="all.page_name != ''"></el-input>
                  <el-button type="danger" size="medium" @click="log_shop = true" style="margin-left: 20px;background:#F72C6A;border-radius:10px">选择商品</el-button>
                  <!-- <el-select v-model="all.page_id" placeholder="请选择商品:" disabled>
                  	<el-option v-for="item in shoplists" :key="item.id" :label="item.title"
                  		:value="item.id"></el-option>
                  </el-select> -->
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>商品名称:</div>
                <div class="r"><el-input style="width: 220px;" v-model="all.sale_name" placeholder="请输入页面名称"></el-input></div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z"><span class="red">*</span>订单来源:</div>
                <div class="r"><el-input v-model="all.page_source" placeholder="请输入敢探号的订单来源" style="width:220px"></el-input></div>
              </div>
              <!-- 新增分类功能 -->
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">商品分类:</div>
                <div class="r">
                  <el-select v-model="all.cat_ids" multiple collapse-tags placeholder="请选择商品分类" style="width:220px">
                    <el-option v-for="item in shangpinfenlei" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </div>
                <div @click="go('/zhiboxitong/fenleiguanli')" style="margin-left: 20px; color: #335DFF; cursor: pointer;">分类管理</div>
              </div>

              <div class="flexc" style="margin-bottom: 20px;">
                      <div class="z"><span class="red">*</span>商品主图:</div>
                      <div class="r">
                        <chuantu ref="chuantu" v-if="relo" @getimg="getimg" :imgs="all.pic" widths="100px" heights="100px" style="background:white"></chuantu>
                      </div>
                      
               </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">详情顶图:</div>
                <div class="r">
                  <chuantu ref="chuantu" v-if="relo" @getimg="getimg2" :imgs="all.details" widths="100px" heights="100px" style="background:white"></chuantu>
                </div>
              </div> 
                      <div style="display:flex;margin-bottom: 25px;">
                        <div class="z" style="text-align: center; margin-top: 30px;" >
                        <div style="display: flex; align-items: center; justify-content: center;">
                          营销图:
                          <el-tooltip class="item" effect="dark" content="可以上传xxx人已购买或者推荐星级等" placement="top-start">
                            <i class="el-icon-question" style="color: #409EFF; font-size: 25px; margin-left: 5px; cursor: pointer;" ></i>
                          </el-tooltip>
                        </div>
                        <!-- <div>首页列表出展示</div> -->
                      </div>
                      <div>
                        <chuantu ref="chuantu" v-if="relo" @getimg="getimg4" :imgs="all.market_pic" widths="100px" heights="100px" style="background:white;width:100px"></chuantu>
                      </div>
                      </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">
                  商品详情页:<br />
                  (富文本模式)
                </div>
                <div class="r">
                    <fuwenben :description="all.description" @fuwenbenfanhui="fuwenbenfanhui" v-if="fuwenbenshow"></fuwenben>
                </div>
              </div>

              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">详情底图:</div>
                <div class="r">
                  <chuantu ref="chuantu" v-if="relo" @getimg="getimg3" :imgs="all.footer" widths="100px" heights="100px" style="background:white"></chuantu>
                </div>
              </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z"><span class="red">*</span>商品价格:</div>
                  <div class="r"><el-input style="width: 220px;" v-model="all.price" placeholder="请输入商品价格"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z"><span class="red">*</span>商品排序:</div>
                  <div class="r"><el-input style="width: 220px;" v-model="all.order" placeholder="请输入商品排序"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">月租:</div>
                  <div class="r"><el-input style="width: 220px;" v-model="all.yuezu" placeholder="请输入月租"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">流量:</div>
                  <div class="r"><el-input style="width: 220px;" v-model="all.liuliang" placeholder="请输入流量"></el-input></div>
                </div>

                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">语音:</div>
                  <div class="r"><el-input style="width: 220px;" v-model="all.yuyin" placeholder="请输入语音"></el-input></div>
                </div>
                <div class="flexc" style="margin-bottom: 20px;">
                  <div class="z">套餐优惠:</div>
                  <div class="r"><el-input style="width: 220px;" v-model="all.taocan" placeholder="请输入套餐优惠"></el-input></div>
                </div>

              <!-- <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">不发货地区:</div>
                <div class="r flex">
                    <el-radio v-model="all.delivery_area" label="1">自定义不发货区域</el-radio>
                    <el-radio v-model="all.delivery_area" label="2">使用产品的不发货区域</el-radio>
                </div>
              </div>
              <div class="flexc" style="margin-bottom: 20px;">
                <div class="z">区域选择:</div>
                <div class="r flex">
                    <el-cascader :options="options" v-model="all.delivery_city" collapse-tags :props="props" clearable>
                    </el-cascader>
                </div>
              </div> -->



            </div>

          </div>
            <h3 style="margin:20px 0 20px 20px">商品下单信息配置</h3>
          <div class="flex" style="background:#F8F9FD; padding: 0 0 30px 40px; border-radius: 30px 0 0 30px;">
            <div class="xialeft">
              <!-- <h4 style="margin: 20px 0;">入网协议</h4>
              <div class="flexc">
                <div style="margin-right: 20px;"><el-radio v-model="all2.ruwangxieyi" label="0">无</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.ruwangxieyi" label="1">有</el-radio></div>
              </div> -->
              <div style="display:flex;margin-left:30px">
              <div style="margin: 30px 0;font-size:14px">身份证信息填写:</div>
              <div class="flexc" style="margin-left:20px">
                <div style="margin-right: 20px;"><el-radio @input="isneedcard" v-model="all2.needidcard" label="1">是</el-radio></div>
                <div style="margin-right: 20px;"><el-radio @input="isneedcard" v-model="all2.needidcard" label="2">否</el-radio></div>
              </div>
              </div>
              <div  style="display:flex">
              <div style="margin: 20px 0;font-size:14px;margin-left:30px">模式选择:</div>
              <div class="flexc" style="margin-left:60px">
                <div style="margin-right: 20px;"><el-radio v-model="all2.xiantianxie" label="1">直接显示所有填写项</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.xiantianxie" label="2">先填写姓名电话，后再显示其他项</el-radio></div>
              </div>
</div>
               <div style="display:flex;">
              <div style="margin: 30px 0;font-size:14px;margin-left:30px">用户下单限制:</div>
              <div>
                 <div style="margin-left:30px;margin-top:30px">
                    <div><el-checkbox :disabled="all2.needidcard=='2'" v-model="all2.guozhengtong">身份证信息国政通校验（付费2角/条）</el-checkbox>
                    <span style="color: #999; font-size: 12px;padding: 10px 23px;">用户填写的身份证信息需经过国政通校验后才可通过，敢探 号余额不足后将不会再验证身份证信息，用户可正常下单</span>
                    
                    </div>
                    <!-- <div style="margin-bottom: 10px;"><el-checkbox v-model="all2.zuidaxiadan">同一证件信息最大下单数量限制（根据产品设置参数限制）</el-checkbox></div> -->
                    <div style="margin-top:20px"><el-checkbox v-model="all2.duanxin">联系电话验证码校验（付费5分/条）</el-checkbox>
                    <span style="color: #999; font-size: 12px;padding: 10px 23px;">验证码有小概率会出现部分用户收不到的情况</span>
                    
                    </div>
                    </div>
                    <div class="flexc" style="margin-left: -90px;margin-top:20px"  v-if="all2.needidcard == 1">
                      <div style="margin-right: 20px;">用户年龄限制(允许下单的年龄范围):</div>
                      <div class="flexc">
                        <el-input v-model="all2.min_page" style="width: 120px; margin-right: 10px;" placeholder="选择最小年龄"></el-input>
                        ——
                        <el-input v-model="all2.max_page" style="width: 120px; margin:0 10px;" placeholder="选择最大年龄"></el-input>
                      </div>
                      <el-tooltip class="item" effect="dark" content="根据用户输入的身份证检测年龄，不符合该年龄范围的用户不能提交订单" placement="top-start">
                        <i class="el-icon-question" style="color: #409EFF; font-size: 25px; margin-left: 5px; cursor: pointer;" ></i>
                      </el-tooltip>
                    </div>
                    <div style="font-size: 14px;margin-left: -90px;margin-top:20px">
                      下单数限制:
                      <el-select v-model="all.limit" style="margin-left: 40px;" placeholder="选择已有的直播页">
                        <el-option label="不限制" :value="0"></el-option>
                        <el-option v-for="item in 9" :key="item" :label="item" :value="item"></el-option>
                      </el-select>
                      <el-select v-model="limit_type1" style="margin-left: 20px;" placeholder="选择已有的直播页" v-if="all2.needidcard=='1'">
                        <el-option label="按照身份证识别" :value="0"></el-option>
                        <el-option label="按照手机号识别" :value="1"></el-option>
                        <el-option label="按照IP地址识别" :value="2"></el-option>
                      </el-select>
                      <el-select v-model="limit_type2" style="margin-left: 20px;" placeholder="选择已有的直播页" v-if="all2.needidcard=='2'">
                        <el-option label="按照手机号识别" :value="1"></el-option>
                        <el-option label="按照IP地址识别" :value="2"></el-option>
                      </el-select>
                      <span v-if="limit_type2 == 2 || limit_type1 == 2" style="color: #999; margin-left: 10px;">如果投放页面的环境无法获取用户IP，此限制将会失效。</span>
                    </div>
              </div>
                </div>
                <div style="margin-top:20px;display:flex">
              <div style="margin-left: 30px;font-size:14px">收货信息模块:</div>
              <div style="margin-bottom: 20px;display:flex">
                <div style="margin-bottom: 10px;margin-left: 30px;"><el-checkbox :disabled="all2.needidcard=='2'" v-model="all2.shouhuorenxingming">收货人使用身份证姓名</el-checkbox></div>
                <div style="margin-left: 30px;"><el-checkbox v-model="all2.shenfenzheng">身份证照片上传</el-checkbox><span style="margin-left: 20px;color: #999; font-size: 12px;" v-if="xiaozi">当前商品需要照片</span></div>
              </div>
                </div>
               <div style="margin-bottom:20px">
              <div style="margin-left: 30px;font-size:14px;">不发货地区:</div>
              <div style="margin-top: -15px;margin-left: 145px;">
              <div class="flexc">
                <div style="margin-right: 20px;"><el-radio v-model="all2.bufahuodiqu" label="2">使用产品的不发货区域</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.bufahuodiqu" label="1">设置只发货区域</el-radio></div>
                <div><el-radio v-model="all2.bufahuodiqu" label="3">设置不发货区域</el-radio></div>
              </div>
              <div style="margin-bottom: 20px;" v-if="all2.bufahuodiqu == 1">
                <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户只能选择选中的省市为收货地址</div>
                <div style="padding-left: 23px;">
                    <el-cascader :options="options" v-model="all2.delivery_city" style="width: 300px;"  collapse-tags :props="props" clearable>
                    </el-cascader>
                </div>
              </div>
              <div style="margin-bottom: 20px;" v-if="all2.bufahuodiqu == 3">
                <div style="color: #999; font-size: 12px; padding: 10px 23px;">设置后用户不能选择选中的省市为收货地址</div>
                <div style="padding-left: 23px;">
                    <el-cascader ref="test" :options="options" style="width: 300px;" v-model="all2.no_city" collapse-tags :props="props" clearable @change="test" >
                    </el-cascader>
                </div>
                <div class="flex" style="margin: 20px;">
                  <el-upload style="height: 34px;" :show-file-list="false"  action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup">
                    <el-button size="small" type="primary" style="background-color: #3158F1; border-radius: 10px;border:none">上传不发货地址</el-button>
                  </el-upload>
                  <el-button type="text" @click="down" style="margin-left: 20px;color: #3158F1;">模板下载</el-button>
                </div>
              </div>
              </div>
              </div>
              <!-- <h4 style="margin: 20px 0;">快手js埋码</h4>
              <div class="flexc">
                <el-input v-model="all2.kuaishou" style="width: 180px; margin-right:20px;" placeholder="请输入快手convertId"></el-input>
              </div> -->

              <!-- 新增 -->
              <div style="display:flex;marign:20px 0">
				<div style="margin-left: 30px; display: flex; align-items: center;font-size:14px">评论板块:
					<el-tooltip class="item" effect="dark" content="由商家自行导入评论内容，在下单滚动显示" placement="top-start">
						<i class="el-icon-question" style="color: #409EFF; font-size: 25px; margin-left: 5px; cursor: pointer;" ></i>
					</el-tooltip>
				</div>
              <div class="flexc" style="margin-left:30px">
                <div style="margin-right: 20px;"><el-radio v-model="all2.pinglun" label="0">不显示</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.pinglun" label="1">显示</el-radio></div>
                <div>
                  <el-select v-model="all2.pinglunid" placeholder="请选择评论模板">
                    <el-option v-for="item in pinglunlist" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </div>
				<div @click="go('/zhiboxitong/pinglunguanli')" style="margin-left: 20px; color: #3158F1; cursor: pointer;">管理评论模板</div>
              </div>
            </div>
              <!-- <h3 style="margin-top: 30px;">订单查询配置</h3>

              <h4 style="margin: 20px 0;">显示订单生产状态以及失败原因</h4>
              <div class="flexc">
                <div style="margin-right: 20px;"><el-radio v-model="all2.dingdanzhuangtai" label="0">不显示</el-radio></div>
                <div style="margin-right: 20px;"><el-radio v-model="all2.dingdanzhuangtai" label="1">显示</el-radio></div>
              </div> -->
            </div>
            <!-- <div class="xiaright" v-if="all2.xiantianxie == 1" style="margin-left:100px;margin-top:60px">
              <div style="height: 620px; overflow: auto;">
                <div style="text-align: center; font-size: 14px;">{{all.sale_name}}</div>
                <div><img src="https://static.91haoka.cn/gantanhao%2Fxingming.png"></div>
                <div v-if="all2.duanxin && all2.shenfenzheng"><img src="https://static.91haoka.cn/gantanhao%2Fyouyanzhengmayouzhengjian.png"></div>
                <div v-if="all2.duanxin && !all2.shenfenzheng"><img src="https://static.91haoka.cn/gantanhao%2Fyouyanzhengma.png"></div>
                <div v-if="!all2.duanxin && all2.shenfenzheng"><img src="https://static.91haoka.cn/gantanhao%2Fwuyanzhengmayouzhengjian.png"></div>
               <div v-if="!all2.duanxin && !all2.shenfenzheng"><img src="https://static.91haoka.cn/gantanhao%2Fwuyanzhengma.png"></div>
              </div>
            </div>
            <div class="xiaright" v-if="all2.xiantianxie == 2" style="margin-left:100px;margin-top:60px">
              <div style="height: 620px; overflow: auto;">
                <div style="text-align: center; font-size: 14px;">{{all.sale_name}}</div>
                <div v-if="all2.duanxin"><img src="https://static.91haoka.cn/gantanhao/xiantian2yanzhengma.png"></div>
                <div v-if="!all2.duanxin"><img src="https://static.91haoka.cn/gantanhao/xiantian2.png"></div>
              </div>
            </div> -->
          </div>


        </div>
            <div style="height: 100px;" class="flexcc">
            <el-button @click="fabu()" style="width:200px;height:48px;background:#3158F1;color:white;border:none;border-radius: 12px;">发布</el-button>
          </div>
      </div>
    </div>

    <el-dialog title="根据已有直播页发布页面" :visible.sync="log" :close-on-click-modal="false" :close-on-press-escape="false" width="700px">
      <div class="flex">
        <el-select v-model="tongbuall" placeholder="选择已有的直播页">
         <el-option v-for="item in list" :key="item.value" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取消</el-button>
        <el-button type="primary" @click="tongbugo">确认</el-button>
      </span>
    </el-dialog>

    <el-dialog title="选择商品" :visible.sync="log_shop" width="820px">
      <div>
        <div class="flex">
          <el-input v-model="shopsearch.title" style="width: 180px; margin-right:20px;" placeholder="请输入商品名称"></el-input>
          <el-input v-model="shopsearch.fetch_code" style="width: 180px; margin-right:20px;" placeholder="请输入商品编码"></el-input>
          <el-button type="danger" @click="getshops()" style="background:#335DFF;border-radius:12px;border:0">搜索</el-button>
        </div>
        <div style="height: 600px; overflow: auto;">

          <div class="flexbc" v-for="item in shoplists" :key="item.id" style="padding:10px 20px; margin-top:10px;">
            <div class="flexc">
              <div style="margin-right: 20px;">
                <img :src="item.image1"  style="width: 100px; height:100px;border-radius:12px">
              </div>
              <div style="margin-right: 20px;">
                <div style="margin-bottom: 10px; font-weight: bold;">{{item.title}}
                  <!-- <el-button type="warning" style="margin-left: 20px;" size="mini" v-if="item.take_number == 1 && item.mobile_config == 1">归属地选号</el-button>
                  <el-button type="warning" style="margin-left: 20px;" size="mini" v-if="item.take_number == 1 && item.mobile_config == 2">支持选号</el-button> -->
                  <el-button type="warning" style="margin-left: 20px;" size="mini" v-if="item.take_number>0">支持选号</el-button>
                </div>
                <div style="margin-bottom: 10px;">编码：{{item.fetch_code}}</div>
                <div style="margin-bottom: 10px;">创建时间：{{item.created_at}}</div>
              </div>
            </div>

            <div>
              <el-button round @click="xuanzhong(item)" style="background:#F72C6A;color:white;border:none">选择商品</el-button>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log_shop = false" style="border-radius:12px">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
	import {tongyidizhi} from '../common/tongyidiqu.js'
import * as qiniu from 'qiniu-js'
  import axios from "axios";
  import top from "./components/top.vue";
  import left from "./components/left.vue";
  import chuantu from "../components/chuantu.vue";
  import {bufahuodiqu} from '../assets/bufahuodiqu.js'
  import fuwenben from "../components/fuwenben.vue";
  export default {
    components: {
      top,left,chuantu,fuwenben
    },
    name: "zhiboxiaoshou_shangpinfabu",
    data() {
      return {
          list:"",
          tongbuall:"",
          log:false,
          log_shop:false,
          input:"",
          all:{
            page_id:"",//	613552	是	string	敢探号商品id
            tab:this.$route.query.tab,//	1	是	string	商城id
            json:"",//		是	string	无
            sale_name:"",//	wq29元1	是	string	销售商品名
            on_sale:0,//		是	string	在售
            price:"",//	11	是	string	价格
            pic:"",//		是	string	图片
            details:"",//		是	string	详情
            order:"",//		是	string	无
            delivery_area:"",//		是	string	无
            delivery_city:"",//		是	string	无
            id:this.$route.query.id?this.$route.query.id:'',//	1	否	string	修改用
            page_name:"",
            yuezu:"",
            liuliang:"",
            taocan:"",
            yuyin:"",
            page_source:"",
            limit:0,
            limit_type:0,
            footer:'',
            temp_id:0,
            market_pic:"",
            cat_id:"",
            cat_ids:[],
            network_access_protocol:0,
            protocol_id:[]
          },
          xieyilist:"",
          all2:{
            guozhengtong:false,
            zuidaxiadan:false,
            duanxin:false,
            shouhuorenxingming:false,
            shenfenzheng:false,
            bufahuodiqu:'1',
            delivery_city:"",
            no_city:"",
            bufahuosheng:[],
            xiantianxie:"1",
            needidcard:"1",
            ruwangxieyi:"0",
            kuaishou:"",
            dingdanzhuangtai:'0',
            pinglun:"0",
            pinglunid:""
          },
          shoplists:"",
          shopsearch:{
            title:"",
            fetch_code:""
          },

          radio:'1',
          options:[],
          props: {
            multiple: true
          },
          relo:true,
          shangpinfenlei:"",
          pinglunlist:"",
          limit_type1:0,
          limit_type2:1,
                    chanpinxixi:"",
                    xiaozi:false
      }
    },
    created() {
      this.getshangpinfenlei()
    },
     mounted() {
      if(this.$route.query.id){
        let p = new Promise((res,rej)=>{
          axios.get(`${this.apis}/api/page/info/manage?id=${this.$route.query.id}`)
          	.then(response => {
          		if (response.data.msg.code == 0) {


                let data = JSON.parse(JSON.stringify(response.data.data))
                let obj = JSON.parse(data.json)

          			this.all = response.data.data
                this.$set(this.all,'yuezu',obj.yuezu)
                this.$set(this.all,'liuliang',obj.liuliang)
                this.$set(this.all,'taocan',obj.taocan)
                this.$set(this.all,'yuyin',obj.yuyin)
                this.$set(this.all,'temp_id',0)

                this.limit_type1 = this.all.limit_type
                this.limit_type2 = this.all.limit_type

                if(this.all.protocol_id != ''){
                  this.all.protocol_id = this.all.protocol_id.map(Number)
                   console.log(this.all.protocol_id)
                }

                this.$set(this.all,'cat_ids',[])

                this.all.catgory.forEach(item2=>{
                  this.all.cat_ids.push(item2.cat_id)
                })

                this.relo = false
                this.$nextTick(()=>{
                  this.relo = true
                })
                this.fuwenbenshow = true

                let wenjianjia = 'web-page'
                if(process.env.NODE_ENV === 'development'){
                  // wenjianjia = 'test-web-page'
                }
                if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
                  wenjianjia = 'web-page'
                }
                if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
                  wenjianjia = 'test-web-page'
                }
				if(window.location.href.includes('localhost')){
				  wenjianjia = 'test-web-page'
				}

                axios.get(`https://file.91haoka.cn/${wenjianjia}/${this.$route.query.id}.json?v=${Math.random()}`)
                // axios.get(`${this.apis}/storage/web-page/${this.$route.query.id}.json?v=${Math.random()}`)
                  .then(response => {

                      this.all2 = JSON.parse(response.data)
                      if(this.all2.needidcard==undefined){
                        this.$set(this.all2, 'needidcard', '1')
                      }

                      this.getchanpinxixi(response.data.data.page_id)

                      res('ok')

                  })

          		} else {
          			this.$message.error(response.data.msg.info);
          		}
          	})
        })
        p.then(res=>{

          if(this.all2.pinglunid){
            let arr = []
            for(let i in this.pinglunlist){
              arr.push(this.pinglunlist[i].id)
            }
            if(!arr.includes(this.all2.pinglunid)){
              this.all2.pinglunid = ''
            }
          }
        })
      }else{
        this.fuwenbenshow = true
      }

      this.options = bufahuodiqu
      // this.options = tongyidizhi
      this.getshops()
    },
    methods: {
      fuwenbenfanhui:function(html){
        this.all.description = html
      },
      getshangpinfenlei:function(){
        axios.get(`${this.apis}/api/catgory/list`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.shangpinfenlei = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        axios.get(`${this.apis}/api/network-process-protocol/list`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.xieyilist = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });

        axios.get(`${this.apis}/api/comment/template/list`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.pinglunlist = response.data.data
            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },
      upup:function(file){
        var params = new FormData();
        params.append('file',file.file);
        axios.post(`${this.apis}/api/delivery/data`, params)
          .then(response=> {
              if (response.data.msg.code == 0) {
                this.all2.bufahuodiqu = '1'
                this.all2.delivery_city = response.data.data
              }else{
                  this.$message.error(response.data.msg.info);
              }
          })
      },
      down:function(){
              const a = document.createElement('a');
            	a.setAttribute('download', '不发货省市区.xlsx');
            	a.setAttribute('href', '/web/static/bufahuoshengshiqu.xlsx');
            	a.click();
      },



      test:function(){
        this.all2.bufahuosheng = []
        let checkedNodeList = this.$refs.test.getCheckedNodes();
        console.log(checkedNodeList)
        checkedNodeList = checkedNodeList.filter(item => (item.parent == null && item.checked)); // 核心
        checkedNodeList.forEach(item=>{
          console.log(item)
          this.all2.bufahuosheng.push(item.value)
        })
      },

      getchanpinxixi:function(page_id){

        axios.get(`${this.apis}/api/product/info?page_id=${page_id}`)
          .then(response => {
            if(response.data.msg.code == 0){
              this.chanpinxixi = response.data.data
              if(this.chanpinxixi.real_name_type == 0){
                this.all2.shenfenzheng = true
                this.xiaozi = true
              }else{
                this.all2.shenfenzheng = false
                this.xiaozi = false
              }

            }else{
              this.$message.error(response.data.msg.info);
            }
          });
      },

      xuanzhong:function(item){

        //查看产品信息

        if(item.real_name_type == 0){
          this.all2.shenfenzheng = true
          this.xiaozi = true
        }else{
          this.all2.shenfenzheng = false
          this.xiaozi = false
        }

        this.all.page_id = item.id
        this.all.page_name = item.title
        
        this.all.pic = item.image1
        
        this.relo = false
        this.$nextTick(()=>{
          this.relo = true
        })
        
        this.all.description = item.description
        this.fuwenbenshow = false
        this.$nextTick(()=>{
          this.fuwenbenshow = true
        })
        this.log_shop = false
      },
      fabu:function(){
        if(!this.all.page_id || !this.all.sale_name || !this.all.pic  || !this.all.price){
          this.$message.error('请填写必选选项');
          return false
        }
        let obj = {
          yuezu: this.all.yuezu,
          liuliang: this.all.liuliang,
          taocan: this.all.taocan,
          yuyin: this.all.yuyin,
        }
        this.all.json = JSON.stringify(obj)

        if(this.all2.needidcard=='2'){
          this.all.limit_type = this.limit_type2
        }else{
          this.all.limit_type = this.limit_type1
        }

         axios.post(`${this.apis}/api/page/make`,this.all)
              .then(response => {
                if (response.data.msg.code == 0) {

                    let id = this.$route.query.id ? this.$route.query.id : response.data.data.id
                    var Obj2str = function(o) {
                        if (o == undefined) {
                            return "";
                        }
                        var r = [];
                        if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
                        if (typeof o == "object") {
                            if (!o.sort) {
                                for (var i in o)
                                    r.push("\"" + i + "\":" + Obj2str(o[i]));
                                if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                                    r.push("toString:" + o.toString.toString());
                                }
                                r = "{" + r.join() + "}"
                            } else {
                                for (var i = 0; i < o.length; i++)
                                    r.push(Obj2str(o[i]));
                                r = "[" + r.join() + "]";
                            }
                            return r;
                        }
                        return o.toString().replace(/\"\:/g, '":""');
                    }


                    let wenjianjia = 'web-page'
                    if(process.env.NODE_ENV === 'development'){
                      // wenjianjia = 'test-web-page'
                    }
                    if(window.location.href.includes('storep.91haoka.cn') && this.apis == ''){
                      wenjianjia = 'web-page'
                    }
                    if(window.location.href.includes('store.91haoka.cn') && this.apis == ''){
                      wenjianjia = 'test-web-page'
                    }
                    if(window.location.href.includes('localhost')){
                      wenjianjia = 'test-web-page'
                    }

                    axios.post(`${this.apis}/api/qiniu/token`,{bucket:'gthshopstore',cloud:`${wenjianjia}/${id}.json`})
                      .then(response => {
                        var that = this
                        if(response.data.msg.code == 0){
                          const observer = {
                            next(res){

                            },
                            error(err){

                            },
                            complete(res){

                              that.$message.success('发布成功');
                              that.$router.push({
                                path:'/zhiboxitong/xiaochengxu/xiaochengxu_shangpin',
                                query:{
                                  id:that.$route.query.tab,
                                  app_id:that.$route.query.app_id,
                                  xcxtype:that.$route.query.xcxtype
                                }
                              })
                            }
                          }

                          let files = Obj2str(JSON.stringify(this.all2))
                          let file = new File([files], `${wenjianjia}/${id}.json`, {type: 'application/json'});
                          const observable = qiniu.upload(file, file.name, response.data.data, {}, {})
                          const subscription = observable.subscribe(observer) // 上传开始
                        }else{
                          this.$message.error(response.data.msg.info);
                        }
                      });

                    // let id = this.$route.query.id ? this.$route.query.id : response.data.data.id


                    //  let data = {
                    //    id:id,//	是	string	销售页的id
                    //    type:"json",//	是	string	css json 等 文件的后缀本示例为 5.css
                    //    data:JSON.stringify(this.all2),//	是	array	要存的数据 到时候访问id.type(5.css)返回的就是data里的数据
                    //    path:"page",//	否	string	store 店铺用的 page 商品用的
                    //  }
                    //  axios.post(`${this.apis}/api/page/json`,data)
                    //       		.then(response => {
                    //       			if (response.data.msg.code == 0) {
                    //               this.$message.success('发布成功');
                    //               // this.goid('/zhiboxitong/xiaochengxu/xiaochengxu_shangpin',this.$route.query.tab)

                    //               this.$router.push({
                    //                 path:'/zhiboxitong/xiaochengxu/xiaochengxu_shangpin',
                    //                 query:{
                    //                   id:this.$route.query.tab,
                    //                   app_id:this.$route.query.app_id
                    //                 }
                    //               })
                    //       			} else {
                    //       				this.$message.error(response.data.msg.info);
                    //       			}
                    //       	})

                } else {
                    this.$message.error(response.data.msg.info);
                }
            })

      },
      getimg:function(img){
        this.all.pic = img
      },
      getimg2:function(img){
        this.all.details = img
      },
      getimg3:function(img){
        this.all.footer = img
      },
      getimg4:function(img){
        this.all.market_pic = img
      },
      xiayibu:function(){
        this.goid('/zhiboxitong/zhiboxiaoshou_fabu2')
      },
      //获取商品
      getshops: function() {
      	axios.get(`${this.apis}/api/order-page/list`,{
          params:this.shopsearch
        })
      		.then(response => {
      			if (response.data.msg.code == 0) {
      				this.shoplists = response.data.data
      			} else {
      				this.$message.error(response.data.msg.info);
      			}
      		})
      },
      //当前是否需要身份证
      isneedcard(e){
        //选择了不需要身份证
        if(e==2){
          //国政通取消
          this.all2.guozhengtong=false
          //收货人使用身份证姓名取消
          this.all2.shouhuorenxingming=false
          this.all2.min_page = ""
          this.all2.max_page = ""
        }
      }

    }
  }
</script>

<style scoped lang="less">
  /deep/ .el-dialog{
    border-radius:20px;
  }
  /deep/ .el-dialog__title {
    font-size: 20px;
    font-weight: bold; /* 修改标题字体大小 */
  }
/deep/ .el-input__inner{
  border-radius: 12px;
}
  .zhiboxiaoshou_shangpinfabu {
    color: #333;
    min-height: 100vh;
    /deep/ .el-breadcrumb{ font-size: 16px;}
    /deep/ .w-e-toolbar{ z-index: 11 !important;}
    /deep/ .w-e-text-container{ z-index: 10 !important;}
    ::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 1px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 1px;
    }
    ::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
      background: #eee;
    }
    ::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #fff;
    }
    *{ box-sizing: border-box;}
    .zhiboxitong_content{
      height: calc(100vh - 70px);
      .left{width: 210px;background: #FAFAFE;height: 100%;}
      .right{ width: calc(100vw - 217px);padding: 30px 0 0 25px;
         overflow: auto;height:100vh;
        .zhiboxitong_right{
           height: calc(100vh - 90px); overflow: auto;  border-radius: 5px; 
          //  background: #FAFAFE;
        }
        .xiaright{
          width: 300px; height: 700px; background: url('https://static.91haoka.cn/gantanhao/shouji3.png');background-size: 300px 700px; padding: 50px 20px;
          img{ width: 100%;}
        }
        .fleft{
          padding-top: 50px;
          .ft{ font-size: 18px;margin-bottom: 30px;font-weight: bold;}
          .z{width: 120px;text-align: right;padding-right: 20px; font-size: 14px;}
          .r{}
        }
        .buzhou{ padding: 50px;}
      }
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    /deep/ .el-radio__input.is-checked .el-radio__inner {
       background: #3158F1;
       border:1px solid #3158F1;
       
    }
   /deep/ .el-radio__input.is-checked+.el-radio__label{
       color: black;
   }
  }
</style>
